<template>
  <div>

    <!-- 这里是标签页 -->
    <div class="main">

      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">

        <el-tab-pane name="success">
            <span slot="label">
              <span><i class="el-icon-circle-check"></i>
                成功
                <el-badge :value="totalSum" v-if="totalSum>0" :max="99" class="my-badge" type="primary">
               </el-badge>
              </span>
            </span>

          <el-col :span="1.5" style="margin-bottom: 10px; margin-left: -10px">

            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="successExport"
              v-hasPermi="['yunze:businessDtails:export']"
            >导出
            </el-button>
          </el-col>

          <el-table :data="successList">
            <el-table-column label="号码" prop="card_number"/>
            <el-table-column label="创建时间" prop="create_time"/>
            <el-table-column label="修改时间" prop="update_time"/>
            <el-table-column label="结束时间" prop="end_time"/>
            <el-table-column label="描述" prop="mydescribe"/>
            <el-table-column label="短信内容" prop="message" :show-overflow-tooltip="true" width="100px">
              <template slot-scope="scope">
                <span @click="showMsg(scope.row.message)" class="link-type">{{ scope.row.message }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="state_id">

              <template slot-scope="scope">
                {{ tools.getDkeyValue(businessDetails_state, scope.row.state_id) }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="totalSum>0"
            :total="totalSum"
            :page.sync="Successtotal.pageNum"
            :limit.sync="Successtotal.pageSize"
            @pagination="pbSel(activeName)"
          />
        </el-tab-pane>

        <el-tab-pane name="fail">
            <span slot="label">
              <span><i class="el-icon-warning-outline"></i>
                失败
                <el-badge :value="Failtotal" v-if="Failtotal>0" :max="99" class="my-badge">
               </el-badge>
              </span>
            </span>
          <el-col :span="1.5" style="margin-bottom: 10px; margin-left: -10px">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportFail"
              @click="failExport"
              v-hasPermi="['yunze:businessDtails:export']"
            >导出
            </el-button>
          </el-col>

          <el-table :data="failList">
            <el-table-column label="号码" prop="card_number"/>
            <el-table-column label="创建时间" prop="create_time"/>
            <el-table-column label="修改时间" prop="update_time"/>
            <el-table-column label="结束时间" prop="end_time"/>
            <el-table-column label="描述" prop="mydescribe"/>
            <el-table-column label="短信内容" prop="message" :show-overflow-tooltip="true" width="100px">
              <template slot-scope="scope">
                <!--                @click="Details(scope.row)"-->
                <span class="link-type">{{ scope.row.message }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="state_id">
              <template slot-scope="scope">
                {{ tools.getDkeyValue(businessDetails_state, scope.row.state_id) }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="Failtotal>0"
            :total="Failtotal"
            :page.sync="FailFrom.pageNum"
            :limit.sync="FailFrom.pageSize"
            @pagination="pbSel(activeName)"
          />
        </el-tab-pane>

        <el-tab-pane name="Pending">
            <span slot="label">
              <span><i class="el-icon-loading"></i>
                待处理
                <el-badge :value="Pendingtotal" v-if="Pendingtotal>0" :max="99" class="my-badge" type="info">
               </el-badge>
              </span>
            </span>
          <el-col :span="1.5" style="margin-bottom: 10px; margin-left: -10px">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportPending"
              @click="PendingExport"
              v-hasPermi="['yunze:businessDtails:export']"
            >导出
            </el-button>
          </el-col>

          <el-table :data="PendingList">
            <el-table-column label="号码" prop="card_number"/>
            <el-table-column label="创建时间" prop="create_time"/>
            <el-table-column label="修改时间" prop="update_time"/>
            <el-table-column label="结束时间" prop="end_time"/>
            <el-table-column label="描述" prop="mydescribe"/>
            <el-table-column label="短信内容" prop="message" :show-overflow-tooltip="true" width="100px">
              <template slot-scope="scope">
                <!--                @click="Details(scope.row)"-->
                <span @click="showMsg(scope.row.message)" class="link-type">{{ scope.row.message }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="state_id">
              <template slot-scope="scope">
                {{ tools.getDkeyValue(businessDetails_state, scope.row.state_id) }}
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="Pendingtotal>0"
            :total="Pendingtotal"
            :page.sync="PendingFrom.pageNum"
            :limit.sync="PendingFrom.pageSize"
            @pagination="pbSel(activeName)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog title="短信详细内容" :visible.sync="show_ds_one"  :modal-append-to-body="false" append-to-body>
      <smsSubcomPonentsNext ref="smsSubcomPonentsNext"
                            @SetObj_one="SetObj_one"
                            :show_ds_one="show_ds_one"
                            :implement_one="implement_one"
                            :Msg="Show_Msg.msg"
      >
      </smsSubcomPonentsNext>
    </el-dialog>


    <!-- 触发加载数据函数-->
    <span v-if="show_ds ==true && implement == false">
        {{ LoadData(this.form) }}
    </span>
  </div>

</template>

<script>
import {successArr, exportExport} from "@/api/yunze/flowcard/bulk/smsbusinessDetails";
import tools from "@/utils/yunze/tools";
import smsSubcomPonentsNext from "./smsSubcomPonentsNext";

export default {
  components: {
    smsSubcomPonentsNext
  },
  props: {
    show_ds: Boolean,//当前界面是否显示
    implement: Boolean,//编辑时加载是否 已执行
    form: Object,//对象

  },
  name: "smsSubcomponents",
  data() {
    return {
      Show_Msg: {show_dia: false, msg: ''},
      message_show: '',
      activeName: "success",//选择那个表格
      successList: [],//成功数组
      failList: [],//失败数组
      PendingList: [],//待处理数组


      // 详情查看
      show_ds_one: false,
      // 加载是否 已执行
      implement_one: false,

      tools: tools,
      businessDetails_state: [],//状态
      showMessage: false,//控制短信下发详情内容是否显示
      //成功分页
      totalSum: 0,
      Successtotal: {
        pageNum: 1,
        pageSize: 10,
      },

      //失败分页
      Failtotal: 0,// 总条数
      FailFrom: {
        pageNum: 1,
        pageSize: 10,
      },

      //待处理分页
      Pendingtotal: 0,
      PendingFrom: {
        pageNum: 1,
        pageSize: 10,
      },

      exportLoading: false,//控制成功导出
      exportFail: false,//控制失败导出
      exportPending: false,//控制待处理导出

      whether_loadSuccess: false,////是否加载  【成功】
      whether_loadFail: false,////是否加载  【失败】
      whether_loadPending: false,////是否加载  【待处理】
    }
  },
  created() {


    //加载 业务状态
    if (window['businessDetails_state'] != undefined && window['businessDetails_state'] != null && window['businessDetails_state'] != '') {
      this.businessDetails_state = window['businessDetails_state'];
    } else {
      this.getDicts("yz_bulk_businessDtails_state_id").then(response => {
        window['businessDetails_state'] = response.data;
        this.businessDetails_state = window['businessDetails_state'];
      });
    }

  },

  methods: {


    //设置数据
    SetObj_one(Key, obj) {
      //console.log(obj);
      switch (Key) {
        case 'Setimplement_one':
          this.implement_one = obj;// 设置
          break;
        case 'Setshow_ds_one':
          this.show_ds_one = obj;// 设置
          break;



      }
    },


    LoadData(row) {
      this.$emit("SetObj", "Setimplement", true);//已加载

      this.showMessage = row.type == 1 ? false : true;
      let map = {};
      map.b_id = row.id;
      map.type = this.activeName;
      this.message_show = row.message;
      // console.log(map)
      this.getSuccess(map);
    },
    showMsg(message) {
      this.Show_Msg.msg = '';
      this.show_ds_one = true;
      this.implement_one = false;
      this.Show_Msg.msg = message;
    },

    getSuccess(map) {
      let Pwd_Str = tools.encrypt(JSON.stringify(map));
      successArr(Pwd_Str).then(response => {
          let jsonobj = JSON.parse(tools.Decrypt(response));
          console.log("展示jsonobk")
          console.log(jsonobj);
          if (jsonobj.code == 200) {
            if (map.type == "success") {
              this.successList = jsonobj.Data.Data;

              console.log("展示massage")

              console.log(this.successList[0].message)

              this.totalSum = jsonobj.Data.Pu.rowCount;
            } else if (map.type == "fail") {
              this.failList = jsonobj.Data.Data;
              this.Failtotal = jsonobj.Data.Pu.rowCount;
            } else if (map.type == "Pending") {
              this.PendingList = jsonobj.Data.Data;
              this.Pendingtotal = jsonobj.Data.Pu.rowCount;
            }
          } else {
            this.msgError(jsonobj.msg);
          }
        }
      );
    },
    /**成功导出*/
    successExport() {
      let map = {};
      map.b_id = this.form.id;
      map.type = this.activeName;
      let Pwd_Str = tools.encrypt(JSON.stringify(map));
      exportExport(Pwd_Str).then(response => {
        let jsonobj = JSON.parse(tools.Decrypt(response));
        if (jsonobj.code == 200) {
          this.msgSuccess(jsonobj.Data);
        } else {
          let msg = jsonobj.Data != null && jsonobj.Data != '' ? jsonobj.Data : jsonobj.msg;
          this.msgError(msg);
        }
      })
    },
    /**失败导出*/
    failExport() {
      let map = {};
      map.b_id = this.form.id;
      map.type = this.activeName;
      let Pwd_Str = tools.encrypt(JSON.stringify(map));
      exportExport(Pwd_Str).then(response => {
        let jsonobj = JSON.parse(tools.Decrypt(response));
        if (jsonobj.code == 200) {
          this.msgSuccess(jsonobj.Data);
        } else {
          let msg = jsonobj.Data != null && jsonobj.Data != '' ? jsonobj.Data : jsonobj.msg;
          this.msgError(msg);
        }
      })
    },
    /**待处理导出*/
    PendingExport() {
      let map = {};
      map.b_id = this.form.id;
      map.type = this.activeName;
      let Pwd_Str = tools.encrypt(JSON.stringify(map));
      exportExport(Pwd_Str).then(response => {
        let jsonobj = JSON.parse(tools.Decrypt(response));
        if (jsonobj.code == 200) {
          this.msgSuccess(jsonobj.Data);
        } else {
          let msg = jsonobj.Data != null && jsonobj.Data != '' ? jsonobj.Data : jsonobj.msg;
          this.msgError(msg);
        }
      })
    },
    /**标签页*/
    handleClick(tab) {
      this.pbSel(tab.name);
    },
    pbSel(name) {
      let map = {};

      if (name == "success") {
        map = this.Successtotal;
      } else if (name == "fail") {
        map = this.FailFrom;
      } else if (name == "Pending") {
        map = this.PendingFrom;
      }
      map.b_id = this.form.id;
      map.type = name;
      this.getSuccess(map);
    },


  },
}
</script>

<style scoped>
.my-badge {
  top: 25px;
  right: 15px;
  float: right;
  -webkit-transform: translateY(-50%) translateX(100%);
}


</style>
